<template>
    <div @click="$router.push('/terminal')"
        style="color:aliceblue;position: absolute;left: 10px;top: 10px;line-height:40px;width: 100px;z-index: 1;background-color: #545c64;border-radius: 10px;text-align: center;cursor: pointer;"
        class="stroke">
        Terminal</div>
    <!-- ヾ(≧∪≦*)ノ〃 -->
    <div id="container"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
    data() {
        return {
            // chartData: [
            //     { value: 1048, name: 'Search Engine' },
            //     { value: 1048, name: 'Search Engine' },
            //     { value: 735, name: 'Direct' },
            //     { value: 580, name: 'Email' },
            //     { value: 484, name: 'Union Ads' },
            //     { value: 300, name: 'Video Ads' }
            // ],
            chartData: [],
        }
    },
    mounted() {
        fetch('http://localhost:5173/api/getFileOrganization')
            .then(response => response.json())
            .then(data => {
                this.chartData = data;
                this.initChart();
                console.log(this.chartData); // 在控制台查看获取的数据
            })
            .catch(error => {
                console.error('Error:', error);
            });
    },
    methods: {
        initChart() {
            var dom = document.getElementById('container');
            var myChart = echarts.init(dom, 'dark', {
                renderer: 'svg',
                useDirtyRect: false
            });
            var app = {};

            var option;

            option = {
                backgroundColor: "rgba(000,000,000,0.5)",
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 0,
                            borderColor: '#fff',
                            borderWidth: .5,
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 35,
                                fontWeight: 'bolder'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: this.chartData,
                    }
                ]
            };

            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }

            window.addEventListener('resize', myChart.resize);
        }
    },
}
</script>

<style scoped>
#container {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

</style>
